<template>
    <el-card shadow="never" class="aui-card--fill">
        <div class="mod-police__order}">
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
                <el-form-item>
                    <el-input v-model="dataForm.serviceItem" placeholder="请输入服务项目" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="dataForm.orderCode" placeholder="请输入订单编号" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="dataForm.creatorName" placeholder="请输入签约人" clearable></el-input>
                </el-form-item>
            </el-form>
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
                <el-form-item>
                    <el-select v-model="dataForm.customerId" clearable placeholder="请选择客户">
                        <el-option v-for="item in customerInfoList" :key="item.id" :label="item.companyName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="dataForm.orderStatus" clearable placeholder="请选择订单状态">
                        <el-option v-for="item in orderStatusList" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="dataForm.orderContractStatus" clearable placeholder="请选择合同状态">
                        <el-option v-for="item in orderContractStatusList" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="getDataList()">{{ $t("query") }}</el-button>
                </el-form-item>
            </el-form>
            <el-table v-loading="dataListLoading" :data="dataList" border
                @selection-change="dataListSelectionChangeHandle" style="width: 100%">
                <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
                <el-table-column label="公司名称" header-align="center" align="center" width="200">
                    <template slot-scope="scope">
                        <el-button type="text" @click="showCompany(scope.row.customerInfoDto)">{{
                            scope.row.customerInfoDto.companyName }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="serviceItem" label="服务项目" header-align="center" align="center"></el-table-column>
                <el-table-column prop="orderCode" label="订单编号" header-align="center" align="center"></el-table-column>
                <el-table-column prop="costAmount" label="订单成本" header-align="center" align="center"></el-table-column>
                <el-table-column prop="totalAmount" label="订单总金额" header-align="center"
                    align="center"></el-table-column>
                <el-table-column prop="totalPayAmount" label="已支付金额" header-align="center"
                    align="center"></el-table-column>
                <el-table-column prop="totalUnPayAmount" label="未支付金额" header-align="center"
                    align="center"></el-table-column>
                    <el-table-column prop="creatorName" label="签约人" header-align="center" align="center"></el-table-column>
                <el-table-column prop="orderStatus" label="订单状态" header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.orderStatus === 0" size="small" type="danger">未完结</el-tag>
                        <el-tag v-if="scope.row.orderStatus === 1" size="small" type="success">已完结</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="orderContractStatus" label="合同状态" header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.orderContractStatus === 0" size="small" type="danger">未签合同</el-tag>
                        <el-tag v-if="scope.row.orderContractStatus === 1" size="small" type="success">已签合同</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="报价图片" header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.amountImagePathSize === 0" size="small" type="danger">暂无图片</el-tag>
                        <el-image v-else style="width: 20px; height: 20px" :src="url"
                            :preview-src-list="scope.row.amountImageUrlList"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="合同图片" header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.imageDataSize === 0" size="small" type="danger">暂无图片</el-tag>
                        <el-image v-else style="width: 20px; height: 20px" :src="url"
                            :preview-src-list="scope.row.imageDataUrlList"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="合同下载" header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="download(scope.row)">合同下载</el-button>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
                    <template slot-scope="scope">
                        <el-badge :hidden="scope.row.payExamineNum === 0" :value="scope.row.payExamineNum" class="item">
                            <el-button size="small" @click="examineUpdate(scope.row.id)">审核款项</el-button>
                        </el-badge>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
                layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
                @current-change="pageCurrentChangeHandle">
            </el-pagination>
            <!-- 弹窗, 新增 / 修改 -->
            <examine-update v-if="examineUpdateVisible" ref="examineUpdate"
                @refreshDataList="getDataList"></examine-update>
        </div>
        <el-dialog title="公司详细信息" :visible.sync="dialogVisible" width="30%">
            <p>联系人: {{ showCompanyData.contactPerson }}</p>
            <p>联系电话: {{ showCompanyData.contactPhone }}</p>
            <p>
                客户类型: {{ showCompanyData.customerType == 0 ? "新客户" : "老客户" }}
            </p>
        </el-dialog>
    </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
import ExamineUpdate from './examine-update'
export default {
    mixins: [mixinViewModule],
    data() {
        return {
            mixinViewModuleOptions: {
                getDataListURL: "/order/order/page",
                getDataListIsPage: true,
                exportURL: "/order/order/export",
                deleteURL: "/order/order",
                deleteIsBatch: true,
            },
            dataForm: {
                serviceItem: "",
                orderCode: "",
                customerId: "",
                creatorName: ""
            },
            orderStatusList: [
                {
                    label: "未完结",
                    value: 0,
                },
                {
                    label: "已完结",
                    value: 1,
                },
            ],
            orderContractStatusList: [
                {
                    label: "未签合同",
                    value: 0,
                },
                {
                    label: "已签合同",
                    value: 1,
                },
            ],
            customerInfoList: [],
            dialogVisible: false,
            showCompanyData: {},
            examineUpdateVisible: false,
            url: "./picture.png"
        };
    },
    components: {
        ExamineUpdate
    },
    created() {
        this.getAllCustomers();
    },
    methods: {
        // 获取所有的客户信息
        getAllCustomers() {
            this.$http.get("/customer/customerinfo/list").then(({ data }) => {
                this.customerInfoList = data.data;
            });
        },
        // 展示公司信息
        showCompany(item) {
            console.log(item);
            this.dialogVisible = true;
            this.showCompanyData = item;
        },
        // 收款审核
        examineUpdate(id) {
            this.examineUpdateVisible = true
            this.$nextTick(() => {
                this.$refs.examineUpdate.dataForm.orderId = id
                this.$refs.examineUpdate.init()
            })
        },
        // 下载的具体方法
        async download(row) {
            const data = row; // 假设 row 包含 imageDataList 和 fileDataList

            // 获取文件列表
            const imageDataList = data.imageDataList || [];
            const fileDataList = data.fileDataList || [];

            const zip = new JSZip();
            const files = [...imageDataList, ...fileDataList];

            const downloadPromises = files.map(async (file) => {
                try {
                    const response = await fetch(file.url);
                    if (!response.ok) {
                        throw new Error(`Failed to fetch ${file.url}: ${response.statusText}`);
                    }
                    const blob = await response.blob();
                    const fileName = file.name.split('/').pop(); // 提取文件名
                    zip.file(fileName, blob);
                } catch (error) {
                    console.error(`Error downloading ${file.name}:`, error);
                }
            });

            // 等待所有文件下载完成
            await Promise.all(downloadPromises);

            // 生成 ZIP 文件并下载
            zip.generateAsync({ type: 'blob' }).then((content) => {
                saveAs(content, '合同文件.zip');
            }).catch((error) => {
                console.error('Error generating ZIP file:', error);
            });
        }
    },
};
</script>

<style>
.item {
    margin-top: 10px;
    margin-right: 40px;
}
</style>